import React, { useState } from 'react';
import PdfViewer from '../components/PdfViewer';
import AnnotationToolbar from '../components/AnnotationToolbar';
import styles from './PdfAnnotationPage.module.css';

const PdfAnnotationPage = () => {
  const [selectedTool, setSelectedTool] = useState('rectangle');
  const [pdfFile, setPdfFile] = useState(null);
  const [annotations, setAnnotations] = useState({});

  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    if (file && file.type === 'application/pdf') {
      setPdfFile(file);
    } else {
      alert('请上传PDF文件！');
    }
  };

  const handleAnnotationChange = (newAnnotations) => {
    setAnnotations(newAnnotations);
  };

  return (
    <div className={styles.container}>
      <div className={styles.leftPanel}>
        <div className={styles.toolbarSection}>
          <h2 className={styles.sectionTitle}>标注工具</h2>
          <AnnotationToolbar 
            selectedTool={selectedTool} 
            onToolSelect={setSelectedTool}
          />
        </div>
        <div className={styles.uploadSection}>
          <h2 className={styles.sectionTitle}>文件上传</h2>
          <div className={styles.uploadBox}>
            <input
              type="file"
              accept=".pdf"
              onChange={handleFileUpload}
              className={styles.fileInput}
              id="pdf-upload"
            />
            <label htmlFor="pdf-upload" className={styles.uploadLabel}>
              {pdfFile ? pdfFile.name : '选择PDF文件'}
            </label>
          </div>
        </div>
      </div>
      <div className={styles.rightPanel}>
        {pdfFile ? (
          <PdfViewer 
            file={pdfFile}
            selectedTool={selectedTool}
            onAnnotationChange={handleAnnotationChange}
          />
        ) : (
          <div className={styles.emptyState}>
            <div className={styles.emptyStateContent}>
              <svg className={styles.uploadIcon} viewBox="0 0 24 24">
                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
              </svg>
              <p>请上传PDF文件开始标注</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default PdfAnnotationPage; 